<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .lll{
            border: 7px solid pink; 
        }
    </style>
    <script src="./jquery3.5.min.js"></script>
</head>
<body>  
    <div id="box" class="cks1 cks3 cls2" name='hk'>sd sdx</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="box5">box5</div>
    <button id="btn">button1</button>
    <input class="ipt" value="init value"/>
    
    <button class="btn2">but2</button>
    <input placeholder="1" class="in"/>
    <input placeholder=" qefvs5" />
    <input placeholder="2" class="in"/>
    <input placeholder="3" class="in"/>
    <script>
        $(function(){
            //获取属性attr()穿一个参数代表获取这个属性两个代表要修改
            // $('.btn2').attr('class','button')//设置属性
            $('.btn2').attr({//设置属性
                'class':'button3',
                'name':'name1',
            })
            //自动获取焦点
            $('.ipt').focus()
            //失去焦点
            setTimeout(function(){
                $('.ipt').blur()
            }, 3000);
            //检测元素内是否含有该属性
            console.log($('#box').hasClass('cls2'));

            let box2 = $('.box2')
            console.log(box2);
            box2.bind('click mouseover',function(){
                let color = box2.css('background-color');
                // debugger
                if(color == 'rgb(0, 0, 255)'){
                    box2.css('background-color','red');
                }else{
                    box2.css('background-color','blue');
                }
            })
            //解除绑定的事件
            $('#btn').click(function(){
                box2.unbind('click')
            })

            //元素显示隐藏定时出现
            $('.box3').hide();
            
            setTimeout(function(){
                $('.box3').show()
            },2000);

            $('#box').click(function(){
                console.log('click');
            })
            //jQuery操作内容
            console.log('text===>',$('#box').text());
            $('#box').text('345')
            $('#box').text('<p> new </p>')

            console.log('html==>',$('#box').html());
            $('#box').html('<p>new person</p>');

            console.log('ipt==>',$('.ipt').val());
            $('.ipt').val('abcde');

            $('.box2').css({
                'backgroundColor':'blue',
                'borderRadius':'50px',
                'width':'250px',
                height:'100px'
            })
            console.log('查看style属性',$('.box2').css("background-color"));
            //往元素尾部添加内容
            $("#box").append('<h1>h1标签</h1>');
            //将前面的添加到后面
            $('<h1>h1标签</h1>').appendTo( $("#box") );

            //头部追加
            $('#box').prepend('<h1>头部追加</h1>')

            //把前面追加的内容追加到后面
            $('<h2>尾部追加</h2>').prependTo( $('#box') );

            //删除元素
             $('.box4').remove();

             //清空节点内容
            $('.box2').empty()

            //外层套 包裹节点
            // $('.ipt').wrap('<div class="lll"></div>')
            $('#btn').click(function(){
                $('.ipt').wrap('<div class="lll"></div>');
                console.log($('.box5'));
                $('.box5').wrap('<a href="https://www.baidu.com"></a>')
                $('.in').wrapAll('<div class="lll"></div>')
            })
        })
    </script>
</body>
</html>